<template>
  <div class="container">
    <div class="detailCard">
      <!-- <van-search placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel" /> -->
      <van-field
        label="大类"
        input-align="right"
        class="shoppingDetail"
        disabled="true"
        @click="selectRoot"
        :value="tagSelectValueRoot"
        placeholder="请选择大类"
      />
      <van-field
        label="小类"
        input-align="right"
        class="shoppingDetail"
        disabled="true"
        @click="selectSub"
        :value="tagSelectValueSub"
        placeholder="请选择小类"
      />
      <van-field
        label="加急"
        input-align="right"
        class="shoppingDetail"
        disabled="true"
        @click="select"
        :value="tagSelectValue"
        placeholder="请选择"
      />
      <van-field
        autosize
        label="配送备注"
        input-align="right"
        class="shoppingDetail"
        @change="remarkChange"
        :value="appData.remark"
        type="textarea"
        placeholder="输入配送备注"
      />
      <div class="detailRow" style="background: #fff;margin-top: 20px;">
        <div>配送数量</div>
        <van-stepper min="1" v-model="appData.quantity" @change="onChange" />
      </div>
      <!-- <van-cell title="单元格">
        <van-stepper slot="right-icon" min="1" v-model="appData.quantity"/>
      </van-cell>-->
      <van-popup :show="showDialog" position="bottom" close-on-click-overlay>
        <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          show-toolbar
          title="请选择"
        />
      </van-popup>
      <van-popup :show="showRoot" position="bottom" close-on-click-overlay>
        <van-picker
          :columns="columnsRoot"
          @confirm="onConfirmRoot"
          @cancel="onCancelRoot"
          show-toolbar
          title="请选择大类"
        />
      </van-popup>
      <van-popup :show="showSub" position="bottom" close-on-click-overlay>
        <van-picker
          :columns="columnsSub"
          @confirm="onConfirmSub"
          @cancel="onCancelSub"
          show-toolbar
          title="请选择小类"
        />
      </van-popup>
    </div>
    <div class="detailMain" v-if="detailShow">
      <div class="detailRow firstRow">
        <div>商品详情</div>
      </div>
      <div class="detailRow">
        <div>商品名</div>
        <div class="detailName">{{appData.name}}</div>
      </div>
      <div class="detailRow">
        <div>单位</div>
        <div class="detailUnit">{{appData.unit}}</div>
      </div>
      <div class="detailRow">
        <div>今日单价</div>
        <div class="detailPrice" v-if="appData.today>0">
          <span style="font-size:28rpx">¥</span>
          {{appData.today}}
        </div>
        <div class="detailPrice" v-else>时价</div>
      </div>
    </div>
    <div class="buttonArea">
      <div class="total">
        <span>合计：</span>
        <span v-if="isNumber" class="price">¥</span>
        <span class="priceInter">{{total}}</span>
      </div>
      <div class="allocation leftBorder" style="background: #0099ff;" @click="addSave">加入清单</div>
      <div class="allocation rightBorder" @click="confirmSave">提交配送</div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";
import { addDelivery, getSub, getRoot, getDetail } from "@/http";
import store from "@/utils/factory.js";

export default {
  components: {
    card
  },

  data() {
    return {
      logs: [],
      appData: {},
      checked: false,
      showDialog: false,
      showRoot: false,
      showSub: false,
      effectChecked: false,
      tagSelectValue: "",
      tagSelectValueRoot: "",
      tagSelectValueSub: "",
      detailShow: false,
      isNumber: true,
      total: 0,
      columnsRoot: [],
      columnsSub: [],
      columns: [{ text: "是", code: "true" }, { text: "否", code: "false" }],
      transFerTag: {
        1: "高意向客户",
        2: "大客户",
        3: "商定签约",
        4: "疑似同行"
      }
    };
  },
  methods: {
    onClose() {
      this.showDialog = false;
    },
    select() {
      this.showDialog = true;
    },
    selectRoot() {
      this.showRoot = true;
    },
    selectSub() {
      if (!this.appData.root) {
        mpvue.showToast({
          title: "请先选择大类",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      this.showSub = true;
    },
    onConfirm(e) {
      this.tagSelectValue = e.mp.detail.value.text;
      this.appData.urgent = e.mp.detail.value.code;
      this.showDialog = false;
    },
    onCancel() {
      this.showDialog = false;
    },
    onCancelRoot() {
      this.showRoot = false;
    },
    addSave() {
      let old = [];
      let self = this;
      if (store.get("batchList")) {
        old = store.get("batchList");
      } else {
        old = [];
      }
      let ret3 = old.findIndex(item => {
        return item.category == self.appData.category;
      });
      console.log(ret3);
      if (ret3 == -1) {
        let obj = [
          {
            category: this.appData.category,
            quantity: this.appData.quantity,
            remark: this.appData.remark,
            urgent: this.appData.urgent,
            name: this.tagSelectValueSub
          }
        ];
        store.set("batchList", [...old, ...obj]);
        mpvue.showToast({
          title: "加入清单成功",
          duration: 2000,
          success: function() {
            setTimeout(function() {
              mpvue.navigateBack({
                delta: 1
              });
            }, 1000);
          }
        });
      } else {
        mpvue.showToast({
          title: "报价清单上已有该报价",
          icon: "none",
          duration: 2000
        });
      }
    },
    onCancelSub() {
      this.showSub = false;
    },
    onConfirmRoot(e) {
      this.tagSelectValueRoot = e.mp.detail.value.text;
      this.appData.root = e.mp.detail.value.code;
      this.showRoot = false;
      this.tagSelectValueSub = "";
      this.appData.category = "";
      this.detailShow = false;
      this.getSub(e.mp.detail.value.code, 2);
    },
    onConfirmSub(e) {
      this.tagSelectValueSub = e.mp.detail.value.text;
      this.appData.category = e.mp.detail.value.code;
      this.showSub = false;
      this.getDetail(this.appData.category);
    },
    back() {
      mpvue.navigateBack({
        delta: 1
      });
    },
    confirmSave() {
      let self = this;
      mpvue.showModal({
        title: "提示",
        content: "确定提供该报价单么？",
        success: function(res) {
          if (res.confirm) {
            self.save();
          }
        }
      });
    },
    save() {
      addDelivery({
        category: this.appData.category,
        quantity: this.appData.quantity,
        remark: this.appData.remark,
        urgent: this.appData.urgent
      }).then(res => {
        mpvue.showModal({
          title: "成功",
          showCancel: false,
          content: "添加配送成功",
          success: function(res) {
            if (res.confirm) {
              mpvue.navigateBack({
                delta: 1
              });
            }
          }
        });
      });
    },
    onChange(e) {
      this.appData.quantity = e.mp.detail;
      console.log(this.appData.quantity);
      if (!this.appData.today) {
        this.total = "时价";
        return false;
      }
      if (this.appData.today < 0) {
        this.total = "时价";
      } else {
        this.total = (this.appData.quantity * this.appData.today).toFixed(2);
      }
    },
    telephoneChange(e) {
      this.appData.telephone = e.mp.detail;
    },
    locationChange(e) {
      this.appData.location = e.mp.detail;
    },
    remarkChange(e) {
      this.appData.remark = e.mp.detail;
    },
    getRoot() {
      getRoot().then(res => {
        this.getSub(res.data.id);
      });
    },
    getDetail(id) {
      let self = this;
      getDetail({ id: id }).then(res => {
        console.log(res);
        let req = res.data;
        self.appData.name = req.category.name;
        self.appData.today = req.today;
        console.log("今日特价", self.appData.today);
        self.appData.unit = req.category.unit;
        if (req.today < 0) {
          self.total = "时价";
          self.isNumber = false;
        } else {
          self.total = (req.today * 1).toFixed(2);
          self.isNumber = true;
        }
        self.$forceUpdate();
        self.detailShow = true;
      });
    },
    getSub(id, type) {
      let self = this;
      getSub({ id: id }).then(res => {
        if (res.rows.length > 0) {
          if (type) {
            self.columnsSub = [];
            res.rows.map(item => {
              self.columnsSub.push({
                text: item.name,
                code: item.id
              });
            });
            return false;
          }
          res.rows.map(item => {
            self.columnsRoot.push({
              text: item.name,
              code: item.id
            });
          });
        } else {
          if (type) {
            self.columnsSub = [];
          }
        }
      });
    }
  },
  onShow() {
    this.appData = {};
    this.tagSelectValue = "否";
    this.today = 0;
    this.isNumber = true;
    this.appData.urgent = false;
    this.tagSelectValueRoot = "";
    this.tagSelectValueSub = "";
    this.appData.quantity = 1;
    this.columnsRoot = [];
    this.columnsSub = [];
    this.detailShow = false;
    this.getRoot();
  },
  mounted() {},
  created() {}
};
</script>

<style>
.card {
  display: flex;
  font-size: 28rpx;
  background: #fff;
  position: relative;
  align-items: center;
}

.detailMain {
  background: #fff;
  margin: 30rpx;
  border-radius: 12rpx;
  transition: all 0.3s;
}

.firstRow {
  background: #0099ff;
  color: #fff;
  border-top-left-radius: 12rpx;
  border-top-right-radius: 12rpx;
}

.firstRow::after {
  display: none !important;
}

.total {
  font-size: 24rpx;
  font-weight: 500;
  flex: 1;
}

.price {
  color: #ee0a24;
}

.priceInter {
  color: #ee0a24;
  font-size: 40rpx;
}

.detailRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  position: relative;
}

.detailRow::after {
  position: absolute;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  content: " ";
  pointer-events: none;
  top: auto;
  right: 0;
  bottom: 0;
  left: 15px;
  border-bottom: 1px solid #eee;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.detailPrice {
  font-size: 40rpx;
  font-weight: bold;
  color: #ee0a24;
}

.detailName {
  font-size: 40rpx;
}

.detailUnit {
  color: #3c3c3c;
}

.card::after {
  position: absolute;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  content: " ";
  pointer-events: none;
  top: auto;
  right: 0;
  bottom: 0;
  left: 30rpx;
  border-bottom: 1px solid #eee;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.left {
  flex: 1;
}
.right {
  color: #a4a4a4;
}

.allocation {
  color: #fff;
  width: 220rpx;
  text-align: center;
  height: 80rpx;
  font-weight: 500;
  line-height: 80rpx;
  border: none;
  /* border-radius: 80rpx; */
  background: linear-gradient(to right, #ff6034, #ee0a24);
}

.leftBorder {
  border-bottom-left-radius: 80rpx;
  border-top-left-radius: 80rpx;
}

.rightBorder {
  border-bottom-right-radius: 80rpx;
  border-top-right-radius: 80rpx;
}

.buttonArea {
  display: flex;
  color: #323233;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  flex-direction: row;
  align-items: center;
  height: 130rpx;
  background: #fff;
  padding: 0 30rpx;
}
</style>
